<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css" />
    <script src="${pageContext.request.contextPath}/layui/jquery2.1.1.js"></script>
    <script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
</head>

<body>
<div class="place"> <span>位置：</span>
    <ul class="placeul">
        <li>数据统计</li>
        <li>厂商采购统计</li>
        <li>采购详情</li>
    </ul>
</div>
<div class="rightinfo">
    <input type="text" name="userPerson" id="userPerson" style="display: none" class="layui-input" >
    <input type="text" name="name" id="name" style="display: none" class="layui-input" >
    <table id="PurchaseTable" lay-filter="PurchaseTable"></table>
</div>
<script>
    layui.use(['table', 'form','laydate'], function () {
        var table = layui.table,
            form = layui.form,
            util = layui.util,
            laydate = layui.laydate,
            $ = layui.jquery;
        form.render();
        $(function () {
            //从父层获取值，json是父层的全局js变量。eval是将该string类型的json串变为标准的json串
            var parent_json = eval('('+parent.json+')');
            $("#userPerson").val(parent_json.userPerson);
            $("#name").val(parent_json.name);
        });
        //第一个实例
        table.render({
            elem: '#PurchaseTable'
            , url: 'http://localhost:8080/PurchaseOrder/resCountList?userPerson='+ $("#userPerson").val()+
                '&name='+ $("#name").val()
            , cols: [[ //表头
                {field: 'id', title: '序号', width: 80, fixed: 'left', align: "center",type:"numbers"}
                , {field: 'name', title: '厂商名称', width: 150, align: "center",
                    templet:function(res){
                        if(res.name == null){
                            return $("#name").val()
                        }else{
                            return ""
                        }
                    }}
                , {field: 'number', title: '采购单编号', width: 200, align: "center",}
                , {field: 'num', title: '商品数量', width: 137, align: "center",}
                , {field: 'amount', title: '采购金额', width: 137, align: "center",}
                , {field: 'auditTime', title: '采购时间', width: 170, align: "center",
                    templet:function(res){
                        if(res.auditTime != null){
                            return util.toDateString(res.auditTime, "yyyy-MM-dd HH:mm:ss")
                        }else{
                            return ""
                        }
                    }}
                , {field: 'userPerson', title: '操作人', width: 150, align: "center"}
                , {title: '采购单明细', width: 150, toolbar: '#barDemo', align: "center"}
            ]]
            , page: true //开启分页
            , limit: 5 //默认分页条数
            , limits: [10, 20, 30] //自定义分页数据选项
        });
        form.render();
        //工具条事件
        table.on('tool(PurchaseTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'details') { //查看
                json = JSON.stringify(data);
                layui.use('layer', function () {
                    layer.open({
                        type: 2,
                        shift: 2,
                        title: '查看',
                        area: ['1000px', '700px'],
                        closeBtn: 1,
                        shadeClose: false,
                        content: 'http://localhost:8080/purchase/purchase/purchaseView.jsp',
                        success: function () {
                        },
                    });
                });
            }
        });
    });
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="details">查看详情</a>
</script>
</body>
</html>
